<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>红米</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="redmi.css">
    <link rel="stylesheet" href="swiper-5.4.5/package/css/swiper.css">


</head>

<body>
    <!-- 产品id -->
    <h1>123456</h1>
    <div class="toptop">
        <div class="top w ">
            <div class="top-nav ">
                <a href="./index.html">小米商城</a>
                <span class="sep">|</span>
                <a href="">MIUI</a>
                <span class="sep">|</span>
                <a href="">loT</a>
                <span class="sep">|</span>
                <a href="">云服务</a>
                <span class="sep">|</span>
                <a href="">天星数科</a>
                <span class="sep">|</span>
                <a href="">有品</a>
                <span class="sep">|</span>
                <a href="">小爱开发平台</a>
                <span class="sep">|</span>
                <a href="">企业团购</a>
                <span class="sep">|</span>
                <a href="">资质证照</a>
                <span class="sep">|</span>
                <a href="">协议规则</a>
                <span class="sep">|</span>
                <a href="">下载app</a>
                <span class="sep">|</span>
                <a href="">智能生活</a>
                <span class="sep">|</span>
                <a href="">Select Location</a>
            </div>
            <div class="top-info">
                <a href="">登录</a>
                <span class="sep">|</span>
                <a href="">注册</a>
                <span class="sep">|</span>
                <a href="">消息通知</a>
            </div>
            <div class="top-car">
                <img src="img/d7db56d1d850113f016c95e289e36efa.png" alt="">
                购物车
            </div>
        </div>
    </div>

    <div class="container-container">
        <!-- logo -->
        <div class="container">
            <div class="header-logo ">
                <a href=""><img src="img/logo-mi2.png" alt=""></a>
            </div>

            <div class="header-nav ">
                <ul>
                    <li><a href="">小米手机</a></li>
                    <li><a href="">Redmi红米</a></li>
                    <li><a href="">电视</a></li>
                    <li><a href="">笔记本</a></li>
                    <li><a href="">家电</a></li>
                    <li><a href="">路由器</a></li>
                    <li><a href="">智能硬件</a></li>
                    <li><a href="">服务</a></li>
                    <li><a href="">社区</a></li>
                </ul>
            </div>

            <div class="header-search">
                <input type="text" placeholder="请输入想要查找的商品">
                <input type="button">
            </div>

        </div>


    </div>


    <!-- 产品类型 -->
    <div class="product-box-top w">
        <h2>Redmi 9A</h2>
        <ul class="left">
            <li><a href="">Redmi 9</a></li>
            <li><a href="">Redmi 8</a></li>
            <li><a href="">Redmi 8A</a></li>
        </ul>
        <div class="right">
            <a href="">概括</a>
            <span>丨</span>
            <a href="">参数</a>
            <span>丨</span>
            <a href="">F码通道</a>
            <span>丨</span>
            <a href="">咨询客服</a>
            <span>丨</span>
            <a href="">用户评价</a>
        </div>
    </div>

    <!-- 产品内容 -->
    <div class="page w">
        <div class="page-top">
            <p>为方便您购买，请提前登录</p><a href="">立即登录</a><a href="">×</a>
        </div>

        <div class="product-box">
            <div class="left-img">
                <div class="swiper-container">
                    <div id="fdj"></div><!-- 放大镜 -->
                    <div class="swiper-wrapper">
                        <div class="swiper-slide car-img"><img src="img-redmi/pms_1595400896.0831679.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="img-redmi/pms_1595400896.07921552.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="img-redmi/pms_1595400896.07966928.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="img-redmi/pms_1595400896.08014623.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="img-redmi/pms_1595400896.08042829.jpg" alt=""></div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination">
                    </div>

                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>

                    <!-- 如果需要滚动条 -->
                    <!-- <div class="swiper-scrollbar"></div> -->
                </div>

                <!-- 大盒子 -->
                <div class="bigbox">
                    <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3523384241,932990291&fm=26&gp=0.jpg" alt="">
                </div>
            </div>

            <div class="product-con">
                <h2>Redmi 9A</h2>
                <p><i>&nbsp;「买赠新冠保险权益；会员米金兑换享10元优惠券；购机赠价值598元体检套餐」&nbsp;</i>5000mAh长循环大电量 / 6.53"超大护眼屏幕 / G25八核处理器 /
                    大音量扬声器 / 1300万 AI相机 / 人脸解锁 / 最高支持512GB存储扩展 </p>
                <p>小米自营</p>
                <p>599 元</p>
                <div class="line"></div>

                <div class="buy-address">
                    <p><span>深圳市</span><span>龙岗区</span><span>龙岗街道</span><a href="">修改</a></p>
                    <p>有现货</p>
                </div>

                <div class="buy-color">
                    <p>选择颜色</p>
                    <a href="javascript:;">砂石黑</a>
                    <a href="javascript:;">晴空蓝</a>
                    <a href="javascript:;">湖光绿</a>
                </div>

                <div class="buy-model">
                    <p>选择版本</p>
                    <a href="javascript:;">4GB+64GB</a>
                    <a href="javascript:;">2GB+32GB</a>
                    <a href="javascript:;">4GB+128GB</a>
                    <a href="javascript:;">6GB+128GB</a>
                </div>

                <!-- 保险 -->
                <div class="buy-protect">
                    <div class="buy-protect-box1">
                        <h2>选择小米提供的意外保护<a href="">了解意外保护></a></h2>

                        <!-- 点击改变背景颜色 -->
                        <ul>
                            <li><i>√</i>
                                <img src="img-redmi/pms_1595494919.28937043.png" alt="">
                                <div class="protect-text">
                                    <h3>意外保障服务<em>99元</em></h3>
                                    <p>手机意外碎屏/进水/碾压等损坏</p>

                                    <p><i>√</i> 我已阅读 <a href="">服务条款 丨</a><a href="">常见问题</a><span>99元</span></p>
                                </div>
                            </li>
                            <li><i>√</i>
                                <img src="img-redmi/pms_1595494919.28937043.png" alt="">
                                <div class="protect-text">
                                    <h3>碎屏保障服务<em>59元</em></h3>
                                    <p>手机意外碎屏</p>

                                    <p><i>√</i> 我已阅读 <a href="">服务条款 丨</a><a href="">常见问题</a><span>59元</span></p>
                                </div>
                            </li>
                        </ul>

                    </div>

                    <div class="buy-protect-box2">
                        <h2>选择小米提供的延长保障<a href="">了解意外保护></a></h2>

                        <!-- 保修服务 点击改变背景颜色 -->
                        <ul>
                            <li><i>√</i>
                                <img src="img-redmi/pms_1595494919.28937043.png" alt="">
                                <div class="protect-text">
                                    <h3>延长保修服务<em>29元</em></h3>
                                    <p>厂报延一年，性能故障免费维修</p>
                                    <p><i>√</i> 我已阅读 <a href="">服务条款 丨</a><a href="">常见问题</a><span>29元</span></p>
                                </div>
                            </li>
                        </ul>
                    </div>

                    <!-- 云空间 -->
                    <div class="buy-protect-box3">
                        <h2>选择小米提供的云空间服务<a href="">了解意外保护></a></h2>

                        <!-- 点击改变背景颜色 -->
                        <ul>
                            <li><i>√</i>
                                <img src="img-redmi/pms_1620462349.42121481.jpg" alt="">
                                <div class="protect-text">
                                    <h3>云空间200G年卡<em>208元</em></h3>
                                    <p>主商品签收后，自动激活至下单账号</p>

                                    <p><i>√</i> 我已阅读 <a href="">服务条款 丨</a><a href="">常见问题</a><span>208元</span></p>
                                </div>
                            </li>
                            <li><i>√</i>
                                <img src="img-redmi/pms_1620462349.42121481.jpg" alt="">
                                <div class="protect-text">
                                    <h3>云空间50G年卡<em>58元</em></h3>
                                    <p>主商品签收后，自动激活至下单账号</p>

                                    <p><i>√</i> 我已阅读 <a href="">服务条款 丨</a><a href="">常见问题</a><span>58元</span></p>
                                </div>
                            </li>
                            <li><i>√</i>
                                <img src="img-redmi/pms_1620462349.42121481.jpg" alt="">
                                <div class="protect-text">
                                    <h3>云空间200G月卡<em>21元</em></h3>
                                    <p>主商品签收后，自动激活至下单账号</p>

                                    <p><i>√</i> 我已阅读 <a href="">服务条款 丨</a><a href="">常见问题</a><span>21元</span></p>
                                </div>
                            </li>
                            <li><i>√</i>
                                <img src="img-redmi/pms_1620462349.42121481.jpg" alt="">
                                <div class="protect-text">
                                    <h3>云空间50G月卡<em>8元</em></h3>
                                    <p>主商品签收后，自动激活至下单账号</p>

                                    <p><i>√</i> 我已阅读 <a href="">服务条款 丨</a><a href="">常见问题</a><span>8元</span></p>
                                </div>
                            </li>
                        </ul>

                    </div>
                </div>


                <!-- 总价 -->
                <div class="price">
                    <p>Redmi 9A 4GB+64GB 砂石黑 <span>599元</span> </p>
                    <h2>总价：599元</h2>
                </div>

                <div class="car">
                    <button id="car">加入购物车</button>
                    <button id="like">喜欢</button>
                </div>


            </div>
        </div>

        <div class="img-box">
            <h3>价格说明</h3>
            <img src="img-redmi/a482afa34053b1b32ece1023475af7fb.jpg" alt="">
        </div>


    </div>

    <!-- footer -->
    <div class="footer w">
        <div class="footer-service">
            <ul>
                <li><a href="">预约维护服务</a></li>
                <li><a href="">7天无理由退货</a></li>
                <li><a href="">15天免费换货</a></li>
                <li><a href="">满69包邮</a></li>
                <li><a href="">520余家售后网点</a></li>
            </ul>
        </div>

        <div class="footer-links">
            <dl>
                <dt>帮助中心</dt>
                <dd>账户管理</dd>
                <dd>购物指南</dd>
                <dd>订单操作</dd>
            </dl>
            <dl>
                <dt>服务支持</dt>
                <dd>售后政策</dd>
                <dd>自助服务</dd>
                <dd>相关下载</dd>
            </dl>
            <dl>
                <dt>线下门店</dt>
                <dd>小米之家</dd>
                <dd>服务网点</dd>
                <dd>授权体验店</dd>
            </dl>
            <dl>
                <dt>关于小米</dt>
                <dd>了解小米</dd>
                <dd>加入小米</dd>
                <dd>投资者关系</dd>
                <dd>企业社会责任</dd>
                <dd>廉洁举报</dd>
            </dl>
            <dl>
                <dt>关于我们</dt>
                <dd>新浪微博</dd>
                <dd>官方微信</dd>
                <dd>联系我们</dd>
                <dd>公益基金会</dd>
            </dl>
            <dl>
                <dt>特色服务</dt>
                <dd>F码通道</dd>
                <dd>礼物码</dd>
                <dd>防伪查询</dd>
            </dl>

            <div class="footer-right">
                <h3>400-100-5678</h3>
                <p>8:00-18:00（仅收市话费）</p>
                <a href="">人工客服</a>
                <div class="follow">
                    关注小米：
                    <img src="img/wb.png" alt="">
                    <img src="img/wx.png" alt="">
                </div>
            </div>
        </div>

    </div>

    <!-- info -->
    <div class="infoinfo">
        <div class="info w">
            <div class="info-container">
                <div class="info-logo">
                    <img src="img/logo-mi2.png" alt="">
                </div>

                <div class="info-text">
                    <p><a href="">小米商城</a><span>丨</span>
                        <a href="">MIUI</a><span>丨</span>
                        <a href="">米家</a><span>丨</span>
                        <a href="">米聊</a><span>丨</span>
                        <a href="">多看</a><span>丨</span>
                        <a href="">游戏</a><span>丨</span>
                        <a href="">政企服务</a><span>丨</span>
                        <a href="">小米天猫店</a><span>丨</span>
                        <a href="">小米集团隐私政策</a><span>丨</span>
                        <a href="">小米商城用户协议</a><span>丨</span>
                        <a href="">问题反馈</a><span>丨</span>
                        <a href="">Select Location</a></p>

                    <p>
                        <a href="">小米互联网法院法律服务工作站</a><span>丨</span>
                        <a href="">中国消费者协会</a><span>丨</span>
                        <a href="">北京市消费协会</a>
                    </p>
                    <h6>© mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2020]0276-042号
                        <br>
                        （京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京)-非经营性-2014-0090 营业执照 医疗器械质量公告
                        <br>
                        增值电信业务许可证 网络食品经营备案 京食药网食备202010048 食品经营许可证
                        <br>
                        违法和不良信息举报电话：171-5104-4404 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</h6>
                </div>

                <div class="info-img">
                    <img src="img/truste.png" alt="">
                    <img src="img/v-logo-2.png" alt="">
                    <img src="img/icon3.png" alt="">
                    <img src="img/ba10428a4f9495ac310fd0b5e0cf8370.png" alt="">
                    <img src="img/2562913da1f1420592a777b69c16134b.png" alt="">
                </div>
            </div>

            <!-- 口号 -->
            <div class="slogan">

            </div>
        </div>
    </div>

    <!-- 回到顶部 -->
    <div class="comeback">
        <ul>
            <li><span><img src="img/98a23aae70f25798192693f21c4d4039.png" alt=""></span>
                <p>手机APP</p>
            </li>
            <li><span><img src="img/55cad219421bee03a801775e7309b920.png" alt=""></span>
                <p>个人中心</p>
            </li>
            <li><span><img src="img/12eb0965ab33dc8e05870911b90f3f13.png" alt=""></span>
                <p>售后服务</p>
            </li>
            <li><span><img src="img/4f036ae4d45002b2a6fb6756cedebf02.png" alt=""></span>
                <p>人工客户</p>
            </li>
            <li><span><img src="img/d7db56d1d850113f016c95e289e36efa.png" alt=""></span>
                <p>购物车</p>
            </li>
            <li><span><img src="img/totop.png" alt=""></span>
                <p>回顶部</p>
            </li>
        </ul>
    </div>

</body>

</html>
<script src="jquery-1.12.4.js"></script>
<script src="js.js"></script>
<script src="swiper-5.4.5/package/js/swiper.js"></script>
<script src="./redmi.js"></script>

<!-- 自动轮播图 js -->
<script>
    var mySwiper = new Swiper('.swiper-container', {
        // direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        // 如果需要滚动条
        scrollbar: {
            el: '.swiper-scrollbar',
        },
        // 如果需要自定播放
        autoplay: {
            pagination: '.swiper-pagination',
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            paginationClickable: true,
            spaceBetween: 30,
            centeredSlides: true,
            autoplay: 500,
            autoplayDisableOnInteraction: false
        }
    })
</script>